<template>
  <div class="lesson-card" @click="$emit('click', lesson)">
    <div class="header">
      <span class="course-type">{{
          `${lesson.licenseTypeName}(${lesson.licenseTypeCode})   ${lesson.courseSubjectName}`
        }}</span>
      <van-tag :type="currentStatusConfig.tagType" size="medium">
        {{ currentStatusConfig.text }}
      </van-tag>
    </div>

    <div class="content">
      <div class="time">
        <van-icon name="clock-o"/>
        {{ DateUtil.formatCustom(lesson.startTime, 'YYYY-MM-DD HH:mm') }} -
        {{ DateUtil.formatCustom(lesson.endTime, 'YYYY-MM-DD HH:mm') }}
      </div>

      <div class="coach">
        <van-icon name="user-o"/>
        {{ lesson.coachName || '未知教练' }}
      </div>

      <div class="car">
        <van-icon name="car-o"/>
        车牌号: {{ lesson.plateNumber || '未分配' }}
      </div>
    </div>

    <div class="footer">
      <div class="students">
        <van-icon name="friends-o"/>
        已预约: {{ lesson.currentStudents }}/{{ lesson.maxStudents }}
      </div>
      <van-button
          size="small"
          type="primary"
          :disabled="status!=='normal'"
          @click.stop="handleReserve"
      >
        点击预约
      </van-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type {PropType} from 'vue'
import type {API} from "@/type/type";
import DateUtil from "@/utils/DateUtils";
import useLesson from "@/views/lesson/select-lesson/useLesson";

const props = defineProps({
  lesson: {
    type: Object as PropType<API.ILesson>,
    required: true
  }
})

const emit = defineEmits<{
  (e: 'reserved', data: API.ILesson): void;
}>()

const {status, currentStatusConfig} = useLesson(props.lesson)


// 处理预约
const handleReserve = async () => {
  emit('reserved', props.lesson)
}
</script>

<style lang="less" scoped>
.lesson-card {
  margin: 10px;
  padding: 12px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f5f5f5;

    .course-type {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }

  .content {
    margin-bottom: 12px;

    & > div {
      display: flex;
      align-items: center;
      margin-bottom: 6px;
      font-size: 14px;
      color: #666;

      .van-icon {
        margin-right: 5px;
        color: #1989fa;
      }
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .students {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #999;

      .van-icon {
        margin-right: 3px;
      }
    }
  }
}
</style>
